<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {margin:0; padding:0;}
        li{list-style:none; }
        #div1 {width:850px; height:500px; margin:50px auto; overflow:hidden; position:relative;}
        #div1 ul li{height:500px;opacity: 0;position: absolute;left: 0;top: 0;z-index: 0;transition: opacity 1.5s;}
        #div1 ul li.ac{z-index: 5;opacity: 1;}
        #div1 ol {position:absolute;right: 10%;bottom: 10px;z-index:6}
        #div1 ol li{border-radius: 10px; width: 20px;height: 20px;background: #ccc;margin-left: 5px;float: left;line-height: 20px;text-align: center;cursor: pointer;}
        #div1 ol li.ac{background: palevioletred;color: #fff;}
        #div1>a{text-decoration: none;position: absolute;top: 50%;margin-top: -10px;height: 40px;line-height: 32px;text-align: center;width: 40px;font-size: 40px;vertical-align: middle;color: #fff;background: rgba(0,0,0,0.5);z-index:6;}
        #goPrev{left: 0;}
        #goNext{right: 0;}
        img{width:850px; height:500px;}
        </style>
</head>
<body>
    <div id="div1">
        <ul>
            <li class="ac"><a href="javascript:;"><img src="img/1.jpg" /></a></li>
            <li><a href="javascript:;"><img src="img/2.jpg" /></a></li>
            <li><a href="javascript:;"><img src="img/3.jpg" /></a></li>
            <li><a href="javascript:;"><img src="img/4.jpg" /></a></li>
            <li><a href="javascript:;"><img src="img/5.jpg" /></a></li>
        </ul>
        <ol>
            <li class="ac"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
        <a href="javascript:;" id="goPrev">&laquo;</a>
        <a href="javascript:;" id="goNext">&raquo;</a>
    </div>
    <script>
        class Shuffling {
            constructor(selector){
                this.box = document.querySelector(selector)
                this.imgs = this.box.querySelectorAll('ul li')
                this.list = this.box.querySelectorAll('ol li')
                this.goPrev = this.box.querySelector('#goPrev')
                this.goNext = this.box.querySelector('#goNext')
                this.index = 0
                this.lastindex = 0
                this.bindEvent()
            }
            bindEvent(){
                this.list.forEach((ele,i) =>{
                    ele.onclick = () =>{
                        this.lastindex = this.index
                        this.index = i
                        this.remove(this.lastindex,this.index)
                    }
                })
                this.goNext.onclick = () =>{
                    this.lastindex = this.index
                    this.index++
                    if(this.index > this.imgs.length - 1){
                        this.index = 0
                        this.remove(this.lastindex,this.index)
                    }
                    this.remove(this.lastindex,this.index)
                }
                this.goPrev.onclick = () =>{
                    this.lastindex = this.index
                    this.index--
                    if(this.index < 0){
                        this.index = this.imgs.length - 1
                        this.remove(this.lastindex,this.index)
                    }
                    this.remove(this.lastindex,this.index)
                }
                this.timer()
                this.box.onmouseenter = () =>{
                    clearInterval(this.box.time)
                }
                this.box.onmouseleave = () =>{
                    this.timer()
                }
            }
            remove(lastindex,index){
                this.list[lastindex].classList.remove('ac')
                this.imgs[lastindex].classList.remove('ac')
                this.list[index].classList.add('ac')
                this.imgs[index].classList.add('ac')
            }
            timer (){
               this.box.time = setInterval(() => {
                    this.goNext.onclick()
                }, 1500);
            }
        }
        new Shuffling('#div1')
    </script>
</body>
</html>